<!-- 
 * @Author: guanpf 992093924@qq.om
 * @Date: 2023-09-10 15:06:06
 * @LastEditTime: 2023-10-14 16:11:59
 * @LastEditors: guanpf
 * @Description: 
 * @FilePath: /ZCGL_WX/src/components/common/me-scroll.vue
 -->
<template>
  <div :ref="meScrollRef" :id="meScrollRef" class="mescroll">
    <div>
      <slot name="list"></slot>
    </div>
  </div>
</template>

<script>
import MeScroll from "mescroll.js";
import "mescroll.js/mescroll.min.css";
export default {
  props: {
    meScrollRef: {
      default: "createMe",
    },
  },
  data() {
    return {
      mescroll: null,
    };
  },
  mounted() {
    this.initMeScroll();
    // document.getElementById(this.meScrollRef).addEventListener("touchmove", function (e) {
    //   e.stopPropagation();
    // });
  },
  methods: {
    initMeScroll() {
      // 创建MeScroll对象:为避免配置的id和父组件id重复,这里使用ref的方式初始化mescroll
      this.mescroll = new MeScroll(this.$refs[this.meScrollRef], {
        // 在mounted生命周期初始化mescroll,以确保您配置的dom元素能够被找到.
        down: {
          use: true, // 启用下拉刷新
          auto: false, // 是否在初始化完毕之后自动执行下拉回调callback; 默认true
          callback: this.downCallback, // 下拉刷新的回调
          isBounce: true, // 禁用Mescroll的内部滚动
          page: {
            num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
            size: 5, // 每页数据的数量
          },
        },
        up: {
          use: true, // 启用上拉刷新
          auto: false, // 是否在初始化时以上拉加载的方式自动加载第一页数据; 默认false
          callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
          page: {
            num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
            size: 5, // 每页数据的数量
          },

          noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于等于5条才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
          toTop: {
            // 配置回到顶部按钮
            src: "http://3710666.cn/img/top.png",
          },

          empty: {
            // 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
            warpId: "newsList", // 父布局的id (1.3.5版本支持传入dom元素)
            icon: "http://3710666.cn/img/not.png", // 图标,默认null,支持网络图
            tip: "暂无相关数据~", // 提示
          },

          lazyLoad: {
            use: true, // 是否开启懒加载,默认false
            attr: "", // 网络图片地址的属性名 (图片加载成功会自动移除改属性):
            offset: 50, // 超出可视区域多少px的图片仍可触发懒加载 默认200. 目的是提前加载可视区域外的部分图片
          },

          htmlNodata: '<p class="upwarp-nodata">亲,没有更多数据了~</p>',
        },
      });
    },
    /* 下拉刷新的回调 */
    downCallback() {
      this.$emit("resetList");
      this.mescroll.optUp.page.num = 1;
    },

    upCallback(page) {
      this.$emit("getList", page.num, page.size);
    },
  },
};
</script>

<style lang="less" scoped>
</style>
